<style type="text/css" scoped="scoped">
    .roleTree {
    }

    .roleTree [class^="icon-"] {
        margin-left: 5px;
        font-size: 0.8em;
    }

    .roleTree .icon-close {
        display: none;
        color: #FF6347;
    }

    .roleTree .rolename {
        cursor: pointer;
        line-height: 20px;
    }

    .roleTree .rolename span {
        margin-left: 0px;
        font-size: 1.1em;
    }

    .roleTree .rolename .created {
        margin-left: 3px;
        padding: 1px 4px;
        background-color: #79c9ec;
        color: #848078;
        font-size: 0.8em;
        border-radius: 10px;;
    }
</style>
<script type="text/javascript">
    $(document).ready(function (e) {
        var roleTree = $('.roleTree').jTree();
        roleTree.showAll();
        $('.roleTree .jentry').each(function (index, element) {
            var id = $(this).attr('id');
            if ($('.roleTree [pid=' + id + ']').length == 0 && $(this).attr('pid') != 0)
                $(this).find('.icon-close').show();
        });
    });
    function roleRemove(id) {
        LC.S.remove([{name: 'id', value: id}], function () {
            LC.goPage(LC.S.serviceUrl, '.roleLeft', {act: 'list'});
        });
    }
</script>
<div class="roleTree">
<#list roles as m>
    <div id="${m._id}" pid="${m.parentId}">
        <span class="rolename" title="${m.notes!" 点击查看详情"}" onClick="LC.S.detail('${m._id}')">
            <span class="icon-user2"></span>
        <span class="name">${m.name}</span>
        <span class="created">${m.created?date}</span></span>
        <span class="icon-user-add" title="添加子角色" onClick="LC.S.add([{name:'parentId',value:'${m._id}'}])"></span>
        <span class="icon-close" title="删除角色" onClick="roleRemove('${m._id}')"></span>
    </div>
</#list>
</div>
